<template>
  <view class="container">
    <view class="header">
      <view class="back-arrow" @click="navigateBack" />
      <text class="title">
        买家列表
      </text>
      <view class="filter" @click="onFilter">
        <image class="filter-icon" src="@/static/images/filter.png" />
        <text class="filter-text">
          筛选
        </text>
      </view>
    </view>

    <view class="search-bar">
      <view class="search-icon" />
      <input v-model="keyword" class="search-input" placeholder="搜索买家名称或手机号" confirm-type="search" @confirm="onSearch">
    </view>

    <view class="summary">
      <text class="total-owe">
        总赊欠：{{ formatNumber(totalOwe) }}
      </text>
      <text class="buyer-count">
        ，共{{ buyers.length }}个买家
      </text>
    </view>

    <view class="buyer-list">
      <view v-for="(buyer, index) in buyers" :key="index" class="buyer-item">
        <view class="row row1">
          <text class="buyer-name">
            {{ buyer.name }}
          </text>
          <text v-if="buyer.consumptionStatus" class="consumption-status"
            :style="{ backgroundColor: buyer.consumptionStatusColor }">
            {{ buyer.consumptionStatus }}
          </text>
        </view>
        <view class="row row2">
          <text class="owe-limit">
            赊欠限制：{{ buyer.oweLimit === 0 ? '0元' : (buyer.oweLimit || '未限制') }}
            <text class="owe-days" :class="getOweDaysClass(buyer.oweDays)">
              {{ buyer.oweDays }}天
            </text>
          </text>

        </view>
        <view class="row row3">
          <view class="left-part">
            <text class="owe-amount">
              已赊欠：{{ formatNumber(buyer.oweAmount) }}元
            </text>
            <text class="owe-days" :class="getOweDaysClass(buyer.oweDays)">
              {{ buyer.oweDays }}天
            </text>
          </view>
          <view class="detail" @click="goDetail(buyer)">
            <text class="detail-text">
              详情
            </text>
            <image class="right-icon" src="@/static/images/report/right.png" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  interface Buyer {
    name : string;
    phone ?: string;
    oweLimit ?: number | string;
    limitDay ?: number;
    oweAmount : number;
    oweDays : number;
    consumptionStatus ?: string;
    consumptionStatusColor ?: string;
  }

  const keyword = ref('');
  const totalOwe = ref(643292);
  const buyers = ref<Buyer[]>([
    {
      name: '临时买家',
      oweLimit: 0,
      limitDay: 0,
      oweAmount: 75578,
      oweDays: 55,
      consumptionStatus: '今日已消费',
      consumptionStatusColor: '#13CE66',
    },
    {
      name: '张三',
      phone: '17720498851',
      oweLimit: '未限制',
      limitDay: 60,
      oweAmount: 75578,
      oweDays: 3,
      consumptionStatus: '7日未消费',
      consumptionStatusColor: '#FFA500',
    },
    {
      name: '张三',
      phone: '17720498851',
      oweLimit: '未限制',
      limitDay: 60,
      oweAmount: 75578,
      oweDays: 3,
      consumptionStatus: '30日未消费',
      consumptionStatusColor: '#FFA500',
    },
  ]);

  const navigateBack = () => {
    uni.navigateBack();
  };

  const onSearch = () => {
    console.log('搜索关键词:', keyword.value);
  };

  const onFilter = () => {
    console.log('点击筛选');
  };

  const formatNumber = (num : number) => {
    return num.toLocaleString();
  };

  const getOweDaysClass = (days : number) => {
    if (days > 30) {
      return 'owe-days-red';
    }
    return 'owe-days-normal';
  };

  const goDetail = (buyer : Buyer) => {
    console.log('进入详情：', buyer);
  };
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
  }

  .header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    height: 88rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .back-arrow {
    position: absolute;
    left: 20rpx;
    width: 30rpx;
    height: 30rpx;
    background: url("@/static/images/back.png") no-repeat center;
    background-size: contain;
  }

  .title {
    font-size: 36rpx;
    color: #000000;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .filter {
    position: absolute;
    right: 20rpx;
    display: flex;
    align-items: center;
  }

  .filter-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .filter-text {
    font-size: 28rpx;
    color: #007aff;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }

  .search-icon {
    width: 40rpx;
    height: 40rpx;
    background: url("@/static/images/search.png") no-repeat center;
    background-size: contain;
    margin-right: 10rpx;
  }

  .search-input {
    flex: 1;
    height: 40rpx;
    font-size: 24rpx;
    border: none;
    outline: none;
  }

  .summary {
    display: flex;
    flex-direction: row;
    padding: 20rpx;
    background-color: #f5f5f5;
  }

  .total-owe {
    font-size: 28rpx;
    color: #ff7f0a;
    margin-right: 30rpx;
  }

  .buyer-count {
    font-size: 28rpx;
    color: #333333;
  }

  .buyer-list {
    display: flex;
    flex-direction: column;
  }

  .buyer-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;
    position: relative;
  }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }

  .buyer-name {
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
  }

  .consumption-status {
    font-size: 24rpx;
    color: #fff;
    padding: 4rpx 10rpx;
    margin-right: -20rpx;
    border-top-left-radius: 4rpx;
    border-bottom-left-radius: 4rpx;
  }

  .owe-limit {
    font-size: 24rpx;
    color: #666666;
  }

  .row3 {
    margin-bottom: 0;
  }

  .left-part {
    display: flex;
    align-items: center;
  }

  .owe-amount {
    font-size: 24rpx;
    color: #666666;
    margin-right: 10rpx;
  }

  .owe-days {
    font-size: 24rpx;
    padding: 0 8rpx;
    border-radius: 4rpx;
  }

  .owe-days-normal {
    color: #666;
    background-color: #f0f0f0;
  }

  .owe-days-red {
    color: #ff4949;
    background-color: #fce2e2;
  }

  .detail {
    display: flex;
    align-items: center;
  }

  .detail-text {
    font-size: 24rpx;
    color: #007aff;
    margin-right: 10rpx;
  }

  .right-icon {
    width: 40rpx;
    height: 40rpx;
  }
</style>
